import React, { useState } from 'react'
import "./Slide.css"
export default function Slide() {

    //声明状态  useState  hook
    let [imgs,setImgs] = useState(["/image/1.jpg","/image/2.jpg","/image/3.jpg","/image/4.jpg","/image/5.jpg",]);
    let [index,setIndex] = useState(0);


    //下一张方法
    let next = ()=>{
        if(index >= imgs.length - 1){
            setIndex(0);
        }else{
            setIndex(++index);
        }
    }

    // 上一张
    let prev = () =>{
        if(index <= 0){
            setIndex(imgs.length-1);
        }else{
            setIndex(--index);
        }
       
    }



    return (
        <div className='slide'>
            <img src={imgs[index]} alt="" />
            <div className='prev btn' onClick={prev}> &lt; </div>
            <div className='next btn' onClick={next}> &gt; </div>
        </div>
    )
}
